<template>
    <div>
    	<div class="mui-input-row mui-search">
		 <input type="search" class="mui-input-clear" v-model="search" placeholder="输入搜索内容">
       </div>
    <!--    <my-swipe :url="lunboUrl"></my-swipe>-->
			<mt-swipe :auto="4000" class="mint-swipe">
				<mt-swipe-item><img src="../../static/img/pic1.jpg"/></mt-swipe-item>
				<mt-swipe-item><img src="../../static/img/pic2.jpg"/></mt-swipe-item>
				<mt-swipe-item><img src="../../static/img/pic3.jpg"/></mt-swipe-item>
			</mt-swipe>

        <!-- 九宫格 -->
			<div class="mui-content">
		        <ul class="mui-table-view mui-grid-view mui-grid-9">	         
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <img src="../../static/img/1.jpg"/>
		                    <div class="mui-media-body">Vue</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <img src="../../static/img/2.jpg"/>
		                    <div class="mui-media-body">Python</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <img src="../../static/img/3.jpg"/>
		                    <div class="mui-media-body">javaScript</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <img src="../../static/img/4.jpg"/>
		                    <div class="mui-media-body">Java</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <img src="../../static/img/5.jpg"/>
		                    <div class="mui-media-body">HTML</div></a></li>
		           <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-more"></span>
		                    <div class="mui-media-body">more</div></a></li>
		        </ul> 
		</div>
	
	<Loadmore :search="search"></Loadmore>
			
    </div>
</template>
<script>
	import Loadmore from './Loadmore'
    export default {
    	name:'Home',
    	components: {
         Loadmore,
		},
        data(){
          return {
          	search:"",
          }
        },
        created(){
        }
    }
</script>
<style scoped>

/*九宫格样式*/
.mui-table-view.mui-grid-view.mui-grid-9{
    background-color: white;
     border: 0;
     margin-top: -10px;
}
.mui-table-view.mui-grid-view.mui-grid-9 li{
    border: 0;
}


.mint-swipe{
	width:100%;
	height:180px;
}
.mint-swipe img{
	width: 100%;
}
.mui-grid-9 img{
	width: 40px;
	height: 40px;
	border: solid 1px #CCC;
	border-radius: 50%;
	padding: 5px;
}
</style>